<template>
  <div id="root">
<Top>
  <p>订单详情</p>
</Top>
  <div>
    <div class="header">
      <div><img :src="'https://elm.cangdu.org/img/'+dingdan.shop.image_path" alt=""></div>
      <div><h2>等待支付</h2></div>

        <div>再来一单</div>


    </div>
    <div class="cmm">
      <div>


        <h3 class="cmm-h3"> <img :src="'https://elm.cangdu.org/img/'+dingdan.shop.image_path" alt="">   {{dingdan.shop.name}}</h3>
        <van-icon name="arrow" />
      </div>
      <div v-for="(v,i) in dingdan.foods" :key="i" class="cmmtiao"><p>{{v.name}} <span v-show="v.specs">---{{v.specs}}</span></p> <div> <span>X{{v.quantity}}</span> <span>¥{{v.price}}</span></div></div>
<!--      <div class="cmmtiao"><p>餐盒</p> <div> <span></span> <span>¥{{messsum}}</span></div></div>-->
      <div class="cmmtiao"><p>配送费</p> <div> <span></span> <span>¥{{dingdan.shop.float_delivery_fee}}</span></div></div>
      <div class="cmmtiao"><p></p> <div> <span></span> <span class="daizhifu">待支付¥{{dingdan.sum}}</span></div></div>
<!--      <div class="cmmtiao">-->
<!--        <p>订单备注 </p> <span></span>  <span @click="pianhao()">口味,偏好等<van-icon name="arrow" /></span>-->
<!--      </div>-->
<!--      <div class="cmmtiao">-->
<!--        <p>发票抬头 </p> <span></span>  <span>不需要开发票</span>-->
<!--      </div>-->
    </div>
    <div class="cmm">
      <p class="cmmtiao">配送信息</p>
      <p class="cmmtiao"> <span>送达时间:尽快送达</span></p>
      <p class="cmmtiao">  <span>送货地址:地址</span></p>
    </div>
  </div>
  </div>
</template>

<script>
import Top from "@/components/Top";
import {mapState} from "vuex";
export default {
name: "Indentxiangqing",
  components: {Top},
  computed: {
  ...mapState(["dingdan"]),
  },

}
</script>

<style scoped>
.header{
  text-align: center;
  //display: flex;
  flex-direction: column;
  //align-items: center;
  padding: .7rem;
  background-color: #fff;
  margin-bottom: .5rem;
}
.header div:nth-child(1),.header div:nth-child(1) img{
  border: .05rem solid #3190e8;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  margin: auto;
}
.header div:nth-child(2){
  margin: 20px;
}
.header div:nth-child(3){
  font-size: .6rem;
  color: #3190e8;
  //margin-top: .5rem;
  border: .025rem solid #3190e8;
  padding: .15rem .4rem;
  border-radius: .1rem;
  width: 100px;
  margin: auto;
}
.cmm{
  background-color: #fff;
  margin-top: 10px;
}
.cmm div:nth-child(1){
  margin: 0;
  color: #333;
  font-weight: 400;
  font-family: Microsoft Yahei;
  box-sizing: border-box;
  padding: .7rem;
  display: flex;
  justify-content: space-between;
  border-bottom: .025rem solid #f5f5f5;
}
.cmm-h3{
  font-size: 1.2rem;
  color: #333;
  margin-left: 10px;
}

.cmm img{
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: middle;
  margin-right: .2rem;
}
.cmmtiao{
  display: flex;
  justify-content: space-between;
  line-height: 2.3rem;
  padding: 0 .7rem;
  border-top: 1px solid #f5f5f5;
}
.cmmtiao p{
  width: 70%;
  font-size: 1.05rem;
  color: #666
}
.cmmtiao div{
  flex: 1;
  display: flex;
  width: 30%;
  justify-content: space-between;
  align-items: center;
}
.cmmtiao div span:nth-child(1){
  color: #f60;
}
.daizhifu{
  font-size: .6rem;
  color: #fb6b23;
  border-top: 1px solid #f5f5f5;
  font-weight: 700;
  line-height: 2rem;
  text-align: right;
  padding-right: .5rem;
}
</style>